import React, { Component } from "react";
import TodoHeader from "./TodoHeader";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";
// import { getTodos, addTodos, editTodos, deleteTodos } from "../service/todos";

export default class App extends Component {
  state = {
    title: "my todo with react",
    btnText: "ADD",
    todos: [],
  };
  componentDidMount() {
    this.getTodos();
  }
  render() {
    const { title, btnText, todos } = this.state;
    return (
      <div>
        <TodoHeader title={title}></TodoHeader>
        <TodoInput
          btnText={btnText}
          click={(title) => this.addTodos(title)}
        ></TodoInput>
        <TodoList
          todos={todos}
          change={(id, completed) => this.editTodos(id, completed)}
          click={(id) => this.deleteTodos(id)}
        ></TodoList>
      </div>
    );
  }
  getTodos() {
    this.$http.getTodos().then((res) => {
      this.setState({
        todos: res.data,
      });
    });
  }
  async addTodos(title) {
    await this.$http.addTodos({
      id: Date.now(),
      title,
      completed: false,
    });

    this.getTodos();
  }
  async editTodos(id, completed) {
    await this.$http.editTodos(id, !completed);
    this.getTodos();
  }
  async deleteTodos(id) {
    await this.$http.deleteTodos(id);
    this.getTodos();
  }
}
